<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.purchaseCode"
                clearable
                placeholder="采购单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="单据状态"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in purchase_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.vendorName"
                clearable
                placeholder="供应商名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.receiptByName"
                clearable
                placeholder="收货人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.receiptPhone"
                clearable
                placeholder="联系方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="创建时间"
                end-placeholder="创建时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button
          type="primary"
          @click="clickAudit"
          v-hasPermi="['purchase:audit:audit']"
      >批量审核
      </el-button>
      <el-button
          type="primary"
          icon="Download"
      >导出
      </el-button>
    </div>
    <vxe-table :height="tableHeight"
               ref="tableRef"
               style="margin-top: 10px"
               border
               align="center"
               :data="tableList"
               :row-config="{isCurrent: true, isHover: true}"
               :checkbox-config="{ trigger:'row'}"
    >
      <vxe-column type="checkbox" width="80"></vxe-column>
      <vxe-column title="序号" type="seq" width="60" align="center"></vxe-column>
      <vxe-column field="status" title="单据状态" width="100">
        <template #default="{row}">
          {{ returnDictLabel(purchase_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="purchaseCode" title="采购单号" width="200"></vxe-column>
      <vxe-column field="vendorName" title="供应商" width="200"></vxe-column>
      <vxe-column field="skuCode"  title="商品编码" width="200"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称">
      </vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl"></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称" ></vxe-column>
      <vxe-column field="receiptByName" title="收货人" width="120"></vxe-column>
      <vxe-column field="receiptPhone" title="联系方式" width="160"></vxe-column>
      <vxe-column field="receiptAddress" title="收货地址" width="200">
      </vxe-column>
      <vxe-column field="remark" title="备注" width="200">
      </vxe-column>
      <vxe-column fixed="right" title="操作" width="80">
        <template #default="{row}">
          <el-button
              v-if="row.status===2 || row.status===3"
              type="text"
              @click="clickView(row)"
          >查看
          </el-button>
          <el-button
              v-if="row.status===1"
              type="text"
              @click="clickOneAudit(row)"
              v-hasPermi="['purchase:audit:audit']"
          >审批
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <el-dialog v-model="isShowDialog"
               :before-close="handleClose"
               title="审核"
               draggable
               width="400px"
               append-to-body
    >
      <span>审核备注</span>
      <el-input type="textarea" :disabled="isView" :rows="3" v-model="saveParams.auditRemark"  clearable/>
      <template #footer>
      <span class="dialog-footer" v-if="!isView">
        <el-button type="primary" @click="purchaseAudit(2)">
          通过
        </el-button>
        <el-button @click="purchaseAudit(3)">驳回</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";
import {erpPurchaseAudit, getErpPurchaseAuditList, warehouseGetFilter} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const {proxy} = getCurrentInstance();
const {purchase_status} = proxy.useDict("purchase_status");
let timeData = ref([])

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
let loading = ref(false)
let isShowDialog=ref(false)
const tableList = ref([])
const total = ref(0)

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

function getList() {
  loading.value = true
  queryParams.value.startTime = timeData.value[0]
  queryParams.value.endTime = timeData.value[1]

  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getErpPurchaseAuditList(params).then(res => {
    if (res.code === 200) {
      tableList.value = res.data
      total.value = res.total
    }
  }).finally(() => {
    loading.value = false
  })

}

let tableHeight = ref(0);
onMounted(() => {
  getWarehouseFilter()
  getList()
  nextTick(() => {
    tableHeight.value = window.innerHeight - 380;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 380;
  }

})

let warehouseList = ref([])

//获取仓库
function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })
    }
  })
}
//批量审核
function clickAudit(){
  const $table = proxy.$refs.tableRef
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    let ids = selectRecords.map(item => item.purchaseId)
    if(ids.length>0){
      isShowDialog.value =true
      saveParams.value.purchaseIds =ids
    }else{
      proxy.$modal.msgWarning("请选择要审核的数据!")
    }

  }
}

//单个审核
function clickOneAudit(row){
  isShowDialog.value =true
  saveParams.value.purchaseIds =[row.purchaseId]
}

let saveParams=ref({
  purchaseIds:"",
  remark:"",
  status:""
})
//审核
function purchaseAudit(status){
  saveParams.value.status=status
  erpPurchaseAudit(saveParams.value).then(res=>{
    if(res.code===200){
      getList()
    }
  }).finally(()=>{
    isShowDialog.value =false
  })
}
function handleClose(){
  saveParams.value={}
  isShowDialog.value =false
  isView.value =false
}
//查看审批详情
let isView=ref(false)
function clickView(row){
  isView.value =true
  isShowDialog.value =true
  saveParams.value.auditRemark =row.auditRemark
}

</script>

<style scoped lang="scss">

</style>